<template>
  <el-breadcrumb separator="/" class="clear-fix">
    <div class="crumb-content">
      <span class="current-position">当前位置：</span>
      <el-breadcrumb-item><a href="javascript:;"@click="clickHome">tsinglog</a></el-breadcrumb-item>
      <!--面包屑中最后一级不给超链接，其余都给超链接-->
      <el-breadcrumb-item
        v-for="(item, index) in currentPosition"
        :key="item.path"
        :to="index == currentPosition.length - 1 ? '' : item.path">
        {{item.pathName}}
      </el-breadcrumb-item>
    </div>
  </el-breadcrumb>
</template>

<script>
  export default {
    name: "BreadCrumb",
    data() {
      return {
        currentPosition: []
      }
    },
    watch: {
      '$route.path': function (newVal) {
        this.buildCurrentPositionFromPathArray(newVal);
      }
    },
    methods: {
      /**
       * 点击面包屑导航条上的tsinglog调用的方法，返回首页
       */
      clickHome() {
        if (this.$route.path != "/dashboard") {
          this.$router.push("/dashboard");
        }
      },
      /**
       * 构建面包屑导航条上的内容
       * @param path 当前的路径
       */
      buildCurrentPositionFromPathArray(path) {
        this.currentPosition = [];
        let pathStr = path.substring(1);
        let pathArray = pathStr.split('/');
        pathArray.shift();
        for (let i of pathArray) {
          switch(i) {
            case 'home': {
              this.currentPosition.push({path: "/dashboard/home", pathName: "首页"});
              break;
            }
            case 'article': {
              this.currentPosition.push({path: "/dashboard/article", pathName: "文章列表"});
              break;
            }
            case 'markdown': {
              this.currentPosition.push({path: "/dashboard/article/markdown", pathName: "使用markdown编辑器"});
              break;
            }
            case 'richeditor': {
              this.currentPosition.push({path: "/dashboard/article/richeditor", pathName: "使用富文本编辑器"});
              break;
            }
            case 'category': {
              this.currentPosition.push({path: "/dashboard/category", pathName: "分类列表"});
              break;
            }
            case 'tag': {
              this.currentPosition.push({path: "/dashboard/tag", pathName: "标签列表"});
              break;
            }
            case 'comment': {
              this.currentPosition.push({path: "/dashboard/comment", pathName: "评论管理"});
              break;
            }
            case 'notice': {
              this.currentPosition.push({path: "/dashboard/notice", pathName: "公告管理"});
              break;
            }
            case 'carousel': {
              this.currentPosition.push({path: "/dashboard/carousel", pathName: "轮播图管理"});
              break;
            }
            case 'saveimage': {
              this.currentPosition.push({path: "/dashboard/saveimage", pathName: "保存轮播图"});
              break;
            }
            case 'user': {
              this.currentPosition.push({path: "/dashboard/user", pathName: "用户列表"});
              break;
            }
            case 'role': {
              this.currentPosition.push({path: "/dashboard/role", pathName: "角色管理"});
              break;
            }
            case 'changePassword': {
              this.currentPosition.push({path: '/dashboard/changePassword', pathName: '修改密码'})
            }
          }
        }
      }
    },
    mounted() {
      this.buildCurrentPositionFromPathArray(this.$route.path);
    }
  }
</script>

<style scoped>
  .el-breadcrumb {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    position: absolute;
    top: 60px;
    right: 0px;
    text-align: right;
    z-index: 501
  }
  .crumb-content{
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 10px;
  }
  .el-breadcrumb__item {
    float: none !important;
  }
  .el-breadcrumb {
    border-bottom: 1px solid #fff;
  }

</style>

<style>

</style>